<template>
  <div class="submitApply">
    <div class="successTitle">
      <img :src="successImg" alt="">
      <div>
        <p style="font-size:16px;line-height:30px;color:#000">请确认所有信息填写准确无误，可进行提交申请！</p>
        <p style="color:#000">若有特别要求可在下方填写备注说明</p>
      </div>
    </div>
    <a-form-model
      :model="submitData"
      :rules="rules"
      :colon="false"
      ref="validateForm">
      <a-row :gutter="36">
        <!-- 一级审核员选择 -->
        <a-col :md="12" :sm="24">
          <a-form-model-item label="一级审核员选择" prop="candidates[0].selectedIds">
            <a-select
              mode="multiple"
              :maxTagCount="1"
              :placeholder="'请选择一级审核员'"
              v-model="submitData.candidates[0].selectedIds"
              @change="(val)=>{changeSelect(val,0)}"
            >
              <a-select-option
                v-for="item in firstReviewerList"
                :key="item.candidateUserId"
                :value="item.candidateUserId"
              >{{ item.candidatesName }}</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <!-- 二级审核员选择 -->
        <a-col :md="12" :sm="24">
          <a-form-model-item label="二级审核员选择" prop="candidates[1].selectedIds">
            <a-select
              mode="multiple"
              :maxTagCount="1"
              :placeholder="'请选择二级审核员'"
              v-model="submitData.candidates[1].selectedIds"
              @change="(val)=>{changeSelect(val,1)}"
            >
              <a-select-option
                v-for="item in secondReviewerList"
                :key="item.candidateUserId"
                :value="item.candidateUserId"
              >{{ item.candidatesName }}</a-select-option>
            </a-select>
          </a-form-model-item>
        </a-col>
        <a-col :md="24" :sm="24">
          <a-form-model-item label="备注说明"  prop="note">
            <a-textarea
              :maxLength="200"
              v-model="submitData.note"
              placeholder="如若有特别事项要求可进行备注说明..."
              style="height:150px"
            />
          </a-form-model-item>
        </a-col>
      </a-row>
    </a-form-model>
  </div>
</template>

<script>
import lodash from 'lodash'

export default {
  components: { 
  },
  props:{
    applyInfo:{
      type: Object,
      default() {
        return {}
      }
    },
  },
  data(){
    return {
      submitData:{
        candidates:[
          {
            flowElementId:'',
            userIds:[],
            selectedIds:[],
            userNames:[]
          },
          {
            flowElementId:'',
            userIds:[],
            selectedIds:[],
            userNames:[]
          }
        ],
        note:undefined
      },
      firstReviewerList:[],
      secondReviewerList:[],
      successImg:require('@/assets/icons/ze-passed.svg'),
      rules:{
        'candidates[0].selectedIds': [{ required: true, message: this.$t('pleaseSelect') }],
        'candidates[1].selectedIds': [{ required: true, message: this.$t('pleaseSelect') }],
      },
    }
  },
  watch:{
    applyInfo:{
      handler(value){
        if(value){
          this.formData=lodash.cloneDeep(value)
          if(this.formData.candidates.length>0){
            this.formData.candidates[0].selectedIds = this.formData.candidates[0].userIds
            this.formData.candidates[1].selectedIds = this.formData.candidates[1].userIds
          }
        }
      },
      immediate:true,
      deep:true
    }
  },
  mounted(){
    this.getUserRegister()
  },
  methods:{
    getApplyInfo(){

    },
    changeSelect(value,index){
      if(value && value.includes('all')){
        this.submitData.candidates[index].selectedIds=['all']
      }
    },
    getUserRegister(){
      this.$api.getUserRegister().then((res)=>{
        this.submitData.candidates[0].flowElementId=res.data[0].flowElementId
        this.submitData.candidates[1].flowElementId=res.data[1].flowElementId
        this.firstReviewerList=[{candidateUserId:'all',candidatesName:"不指定人员，系统自动分配"},...res.data[0].roleCandidates]
        this.secondReviewerList=[{candidateUserId:'all',candidatesName:"不指定人员，系统自动分配"},...res.data[1].roleCandidates]
      })
    },
    getFormData(){
      return new Promise(((resolve, reject) => {
        this.$refs.validateForm.validate((valid) => {
          if (!valid) {
            reject();
            return;
          }
            const data=lodash.cloneDeep(this.submitData)
            if(data.candidates[0].selectedIds.includes('all')){
              this.firstReviewerList.forEach((item)=>{
                if(item.candidateUserId!=='all'){
                  data.candidates[0].userIds.push(item.candidateUserId)
                  data.candidates[0].userNames.push(item.candidatesName)
                }
              })
            }else{
              this.firstReviewerList.forEach((item)=>{
                data.candidates[0].selectedIds.forEach((id)=>{
                  if(item.candidateUserId==id){
                    data.candidates[0].userIds.push(item.candidateUserId)
                    data.candidates[0].userNames.push(item.candidatesName)
                  }
                })
              })
            }
            if(data.candidates[1].selectedIds.includes('all')){
              this.secondReviewerList.forEach((item)=>{
                if(item.candidateUserId!=='all'){
                  data.candidates[1].userIds.push(item.candidateUserId)
                  data.candidates[1].userNames.push(item.candidatesName)
                }
              })
            }else{
              this.secondReviewerList.forEach((item)=>{
                data.candidates[1].selectedIds.forEach((id)=>{
                  if(item.candidateUserId==id){
                    data.candidates[1].userIds.push(item.candidateUserId)
                    data.candidates[1].userNames.push(item.candidatesName)
                  }
                })
              })
            }
          resolve(data);
            // this.$emit('sendApplyInfo',data)
        })
      }))
    }
  }
}
</script>

<style lang="less" scoped>
.submitApply{
  .successTitle{
    display: flex;
    justify-content: center;
    align-items: center;
  }
}
</style>